<template>
  <view class="container">
    <!-- 顶部标题 -->
    <view class="header">
      <view class="title">地块秒杀</view>
      <view class="search-btn">
        <u-icon name="search" color="#ffffff" size="20"></u-icon>
      </view>
    </view>
    
    <!-- 筛选标签 -->
    <view class="filter-tabs">
      <view class="tab-item" :class="{active: activeTab === 'rent'}" @click="goToRent">土地租赁</view>
      <view class="tab-item" :class="{active: activeTab === 'seckill'}" @click="activeTab = 'seckill'">土地秒杀</view>
    </view>
    
    <!-- 秒杀列表 -->
    <view class="sk-list">
      <view 
        class="sk-item" 
        v-for="(item, index) in skList" 
        :key="index"
       
      >
        <view class="sk-info">
          <view class="sk-name">地块秒杀 #{{item.skId}}</view>
          <view class="sk-price">
            <text class="current">¥{{item.skPrice/100}}</text>
            <text class="original">原价: ¥{{originalPrice(item)/100}}</text>
          </view>
          <view class="sk-data">
            <text>面积: {{item.skArea}}</text>
            <text>剩余: {{item.skNum}}块</text>
          </view>
          <view class="sk-time">
            <template v-if="getStatus(item) === 0">
              <text>即将开始: </text>
              <u-count-down :time="getTimeLeft(item.skstarttime)" format="DD:HH:mm:ss" autoStart></u-count-down>
            </template>
            <template v-else-if="getStatus(item) === 1">
              <text class="active">正在进行: </text>
              <u-count-down :time="getTimeLeft(item.skendtime)" format="DD:HH:mm:ss" autoStart></u-count-down>
            </template>
            <text v-else>已结束</text>
          </view>
        </view>
        <view class="sk-btn" :class="{'active': getStatus(item) === 1}">
          <text v-if="getStatus(item) === 0">即将开始</text>
          <text v-else-if="getStatus(item) === 1" @click="goKillDetail(item.landid)">立即抢购</text>
          <text v-else>已结束</text>
        </view>
      </view>
    </view>
    
    <!-- 无数据提示 -->
    <view class="empty" v-if="skList.length === 0">
      <text>暂无秒杀活动</text>
    </view>
  </view>
</template>


<script>
import request from '@/util/request.js'

export default {
  data() {
    return {
      skList: [],
      activeTab: 'seckill'
    }
  },
  onLoad() {
    this.getSecondKillList()
  },
  methods: {
    // 获取秒杀列表
    getSecondKillList() {
      uni.showLoading({
        title: '加载中'
      })
      
      // 使用封装的request方法
      request({
        url: '/land-service/secondKill/selectAll',
        method: 'GET'
      }).then(res => {
        // 处理成功响应
        this.skList = res.data.list || []
      }).catch(err => {
        console.error('获取秒杀列表失败:', err)
        uni.showToast({
          title: '获取秒杀列表失败',
          icon: 'none'
        })
      }).finally(() => {
        uni.hideLoading()
      })
    },
    
    // 跳转到详情页
    goKillDetail(fieldId) {
      console.log(fieldId)
      uni.navigateTo({
        url: `/pages/secondKill/tbLand?landId=${fieldId}`
      })
    },
    
    // 计算原价（这里假设从关联的地块信息获取，实际可能需要调整）
    originalPrice(item) {
      // 这里假设原价是秒杀价的1.5倍，实际应从地块信息获取
      return item.skPrice * 1.5
    },
    
    // 获取秒杀状态：0-未开始，1-进行中，2-已结束
    getStatus(item) {
      const now = new Date().getTime()
      const start = new Date(item.skstarttime).getTime()
      const end = new Date(item.skendtime).getTime()
      
      if (now < start) return 0
      if (now > end) return 2
      return 1
    },
    
    // 获取剩余时间（毫秒）
    getTimeLeft(timeStr) {
      const targetTime = new Date(timeStr).getTime()
      const now = new Date().getTime()
      const diff = targetTime - now
      
      // 返回剩余时间（毫秒），如果小于0则返回0
      return diff > 0 ? diff : 0
    },

    // 跳转到租赁页面
    goToRent() {
      uni.redirectTo({
        url: '/pages/farm/rent'
      })
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #4CAF50;
  color: #ffffff;
  padding: 20rpx 30rpx;
  position: relative;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.search-btn {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.filter-tabs {
  display: flex;
  background-color: #ffffff;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #4CAF50;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #4CAF50;
}

.sk-list {
  margin-top: 20rpx;
}

.sk-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.sk-info {
  flex: 1;
}

.sk-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.sk-price {
  display: flex;
  align-items: baseline;
  margin-bottom: 10rpx;
}

.current {
  font-size: 36rpx;
  color: #FF5722;
  font-weight: bold;
  margin-right: 10rpx;
}

.original {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
}

.sk-data {
  display: flex;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.sk-data text {
  margin-right: 20rpx;
}

.sk-time {
  font-size: 26rpx;
  color: #666;
}

.sk-time .active {
  color: #FF5722;
}

.sk-btn {
  width: 160rpx;
  height: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 30rpx;
  color: #999;
  font-size: 28rpx;
}

.sk-btn.active {
  background-color: #FF5722;
  color: #fff;
}

.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300rpx;
  color: #999;
}
</style>

